---
title: VictoryVoronoiContainer
---

Adds the ability to associate a mouse position with the data point(s) closest to it.

:::info
For examples of `VictoryVoronoiContainer` in action, visit the [containers](/docs/guides/containers) guide.
:::

## Inherited Props

<CommonProps
  interfaces={["VictoryContainerProps"]}
  overrides={[]}
/>

## Component Props

---

### activateData

<Badges>
  <TypeBadge value="boolean" />
  <DefaultsBadge value="true}" />
</Badges>

When the `activateData` prop is set to true, the `active` prop will be set to true on all data components within a voronoi area. When this prop is set to false, the `onActivated` and `onDeactivated` callbacks will still fire, but no mutations to data components will occur via Victory's event system.

---

### activateLabels

<Badges>
  <TypeBadge value="boolean" />
  <DefaultsBadge value="true}" />
</Badges>

When the `activateLabels` prop is set to true, the `active` prop will be set to true on all labels corresponding to points within a voronoi area. When this prop is set to false, the `onActivated` and `onDeactivated` callbacks will still fire, but no mutations to label components will occur via Victory's event system. Labels defined directly on `VictoryVoronoiContainer` via the `labels` prop will still appear when this prop is set to false.

---

### disable

<Badges>
  <TypeBadge value="boolean" />
</Badges>

When the `disable` prop is set to `true`, `VictoryVoronoiContainer` events will not fire.

---

### labels

<Badges>
  <TypeBadge value="function" />
</Badges>

When a `labels` prop is provided to `VictoryVoronoiContainer` it will render a label component
rather than activating labels on the child components it renders. This is useful for creating multi-
point tooltips. This prop should be given as a function which will be called once for each active point. The `labels` function will be called with the props that correspond to the active label.

_example:_ `labels={({ datum }) => "y: " + datum.y}`

---

### labelComponent

<Badges>
  <TypeBadge value="ReactElement" />
  <DefaultsBadge value="<VictoryTooltip centerOffset={{ x: 5 }} />" />
</Badges>

The `labelComponent` prop specified the component that will be rendered when `labels` are defined
on `VictoryVoronoiContainer`. If the `labels` prop is omitted, no label component will be rendered.


```jsx live
<VictoryChart
  domain={{ y: [0, 6] }}
  containerComponent={
    <VictoryVoronoiContainer
      labels={() =>
        "Long, verbose labels"
      }
      labelComponent={
        <VictoryTooltip
          dy={-7}
          constrainToVisibleArea
        />
      }
    />
  }
  theme={VictoryTheme.clean}
>
  <VictoryScatter
    style={{
      data: { fill: "red" },
      labels: { fill: "red" },
    }}
    data={[
      { x: 0, y: 2 },
      { x: 2, y: 3 },
      { x: 4, y: 4 },
      { x: 6, y: 5 },
    ]}
  />
  <VictoryScatter
    data={[
      { x: 2, y: 2 },
      { x: 4, y: 3 },
      { x: 6, y: 4 },
      { x: 8, y: 5 },
    ]}
  />
</VictoryChart>
```

---

### mouseFollowTooltips

<Badges>
  <TypeBadge value="boolean" />
</Badges>

When the `mouseFollowTooltip` prop is set on `VictoryVoronoiContainer`, The position of the center of the tooltip follows the position of the mouse.

```jsx live
<VictoryChart
  domain={{ y: [0, 6] }}
  containerComponent={
    <VictoryVoronoiContainer
      mouseFollowTooltips
      voronoiDimension="x"
      labels={({ datum }) =>
        `y: ${datum.y}`
      }
    />
  }
  theme={VictoryTheme.clean}
>
  <VictoryScatter
    style={{
      data: { fill: "red" },
      labels: { fill: "red" },
    }}
    data={[
      { x: 0, y: 2 },
      { x: 2, y: 3 },
      { x: 4, y: 4 },
      { x: 6, y: 5 },
    ]}
  />
  <VictoryScatter
    data={[
      { x: 2, y: 2 },
      { x: 4, y: 3 },
      { x: 6, y: 4 },
      { x: 8, y: 5 },
    ]}
  />
</VictoryChart>
```

---

### onActivated

<Badges>
  <TypeBadge value="function" />
</Badges>

The `onActivated` prop accepts a function to be called whenever new data points are activated.
The function is called with the parameters `points` (an array of active data objects) and `props` (the props used by `VictoryVoronoiContainer`).

_example:_ `onActivated={(points, props) => filterList(points, props)}`

---

### onDeactivated

<Badges>
  <TypeBadge value="function" />
</Badges>

The `onDeactivated` prop accepts a function to be called whenever points are deactivated.
The function is called with the parameters `points` (an array of the newly-deactivated data objects) and `props` (the props used by `VictoryVoronoiContainer`).

_example:_ `onDeactivated={(points, props) => removeFromList(points, props)}`

---

### radius

<Badges>
  <TypeBadge value="number" />
</Badges>

When the `radius` prop is set, the voronoi areas associated with each data point will be no larger
than the given radius. This prop should be given as a number.

---

### voronoiBlacklist

<Badges>
  <TypeBadge value="string[]" />
</Badges>

The `voronoiBlacklist` prop is used to specify a list of components to ignore when calculating a shared voronoi diagram. Components with a `name` prop matching an element in the `voronoiBlacklist` array will be ignored by `VictoryVoronoiContainer`. Ignored components will never be flagged as active, and will not contribute data to shared tooltips or labels.

_example:_ `voronoiBlacklist={["redPoints"]}`

```jsx live
<VictoryChart
  domain={{ y: [0, 6] }}
  containerComponent={
    <VictoryVoronoiContainer
      voronoiBlacklist={["redPoints"]}
      labels={({ datum }) =>
        `y: ${datum.y}`
      }
    />
  }
  theme={VictoryTheme.clean}
>
  <VictoryScatter
    name="redPoints"
    style={{
      data: { fill: "red" },
      labels: { fill: "red" },
    }}
    data={[
      { x: 0, y: 2 },
      { x: 2, y: 3 },
      { x: 4, y: 4 },
      { x: 6, y: 5 },
    ]}
  />
  <VictoryScatter
    data={[
      { x: 2, y: 2 },
      { x: 4, y: 3 },
      { x: 6, y: 4 },
      { x: 8, y: 5 },
    ]}
  />
</VictoryChart>
```

---

### voronoiDimension

<Badges>
  <TypeBadge value='"x" | "y"' />
</Badges>

When the `voronoiDimension` prop is set, voronoi selection will only take the given dimension into account.
For example, when `dimension` is set to "x", all data points matching a particular x mouse position
will be activated regardless of y value. When this prop is not given, voronoi selection is
determined by both x and y values.

_example:_ `voronoiDimension="x"`

```jsx live
<VictoryChart
  domain={{ y: [0, 6] }}
  containerComponent={
    <VictoryVoronoiContainer
      voronoiDimension="x"
      labels={({ datum }) =>
        `y: ${datum.y}`
      }
    />
  }
  theme={VictoryTheme.clean}
>
  <VictoryScatter
    style={{
      data: { fill: "red" },
      labels: { fill: "red" },
    }}
    data={[
      { x: 0, y: 2 },
      { x: 2, y: 3 },
      { x: 4, y: 4 },
      { x: 6, y: 5 },
    ]}
  />
  <VictoryScatter
    data={[
      { x: 2, y: 2 },
      { x: 4, y: 3 },
      { x: 6, y: 4 },
      { x: 8, y: 5 },
    ]}
  />
</VictoryChart>
```

---

### voronoiPadding

<Badges>
  <TypeBadge value="number" />
</Badges>

When the `voronoiPadding` prop is given, the area of the chart that will trigger voronoi events is
reduced by the given padding on every side. By default, no padding is applied, and the entire range
of a given chart may trigger voronoi events. This prop should be given as a number.
